<div class="map">
  <div class="car"></div>
</div>








<footer>
  <p>
    Created with <i class="fa fa-heart"></i> by
    <a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a>
    Follow me :
    <a target="_blank" href="https://www.instagram.com/ahmadbassamemran/"><i class="fab fa-instagram"></i></a>
    <a target="_blank" href="https://www.linkedin.com/in/ahmademarn/"><i class="fab fa-linkedin"></i></a>
    <a target="_blank" href="https://codepen.io/ahmadbassamemran/"><i class="fab fa-codepen"></i></a>
    <a target="_blank" href="https://dev.to/ahmadbassamemran"><i class="fab fa-dev"></i></a>
    <a target="_blank" href="https://twitter.com/ahmadbassamemra"><i class="fab fa-twitter-square"></i></a>
  </p>
</footer>

<div class="youtubeBtn">
  <a target="_blank" href="https://www.youtube.com/AhmadEmran?sub_confirmation=1">
    <span>Watch on YouTube</span>
    <i class="fab fa-youtube"></i>
  </a>

</div>

<style>
  body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100vh;
    background-color: #222f3e;
  }

  .map {
    position: absolute;
    width: 455px;
    height: 455px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('');
    background-size: cover;
    background-repeat: no-repeat;
    border: 10px solid #ff6b6b;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .5);
  }

  .car {
    width: 80px;
    height: 40px;
    background-image: url('');
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(.4);
    offset-path: path("M288.4,129.9l-26.6,4.3c-0.8,0.2-1.5,0.6-1.9,1.3l-18.2,26.6c-0.6,0.9-1.6,1.4-2.6,1.3l-78.2-4.9c-1.1-0.1-2.1-0.7-2.5-1.8l-25.6-60.9c-0.6-1.3-2-2-3.4-1.7l-24.7,6.5c-0.5,0.1-1,0.4-1.4,0.9l-56.1,63c-1.1,1.2-3.1,3.9-1.2,6l77.9,68.3c2.4,1.4,1.8,4.9,1.3,6.1l-26.6,59.7c-0.4,0.8-0.3,1.7,0.1,2.5l17.8,35.8l13.4,29.4c0.4,0.5,5.9,3.5,6.5,3.6l31.8,9l42,9.5c0.3-0.7,0.4-3.3,0.2-4.1l-20.2-56.6c-0.4-1.2-4.2-8.8-0.7-10.3l46.8-32.6l44.3-36.4c-0.2-3.1-1.5-6.8-1.9-8l-3-8.4c-0.6-2,1.1-4,3.2-3.7l109,14.4c1.3,0.2,2.6-0.5,3.1-1.7l7.8-18c0.5-1.2,0.2-2.6-0.8-3.4l-66.8-57.3l-39.9-37.7C290.2,130,289.3,129.8,288.4,129.9z");
    animation: move 15s linear infinite;
  }

  .car:before,
  .car:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 15px;
    left: -5px;
    border-radius: 50%;
    background-color: #000;
    filter: blur(2px);
  }

  .car:before {
    animation: carSmoke .5s linear infinite .7s;
  }

  .car:after {
    animation: carSmoke .7s linear infinite;
  }

  @keyframes move {
    100% {
      offset-distance: 100%;
    }
  }

  @keyframes carSmoke {
    100% {
      transform: translate(-30px, 15px) scale(0);
    }
  }



  /*  footer   */
  footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
  }

  footer p {
    margin: 10px 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  footer .fa-heart {
    color: red;
  }

  footer .fa-dev {
    color: #fff;
  }

  footer .fa-twitter-square {
    color: #1da0f1;
  }

  footer .fa-instagram {
    color: #f0007c;
  }

  fotter .fa-linkedin {
    color: #0073b1;
  }

  footer .fa-codepen {
    color: #fff
  }

  footer a {
    color: #3c97bf;
    text-decoration: none;
    margin-right: 5px;
  }

  .youtubeBtn {
    position: fixed;
    left: 50%;
    transform: translatex(-50%);
    bottom: 45px;
    cursor: pointer;
    transition: all .3s;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
  }

  .youtubeBtn i {
    font-size: 20px;
    float: left;
  }

  .youtubeBtn a {
    color: #ff0000;
    animation: youtubeAnim 1000ms linear infinite;
    float: right;
  }

  .youtubeBtn a:hover {
    color: #c9110f;
    transition: all .3s ease-in-out;
  }

  .youtubeBtn i:active {
    transform: scale(.9);
    transition: all .3s ease-in-out;
  }

  .youtubeBtn span {
    font-family: 'Lato';
    font-weight: bold;
    color: #fff;
    display: block;
    font-size: 12px;
    float: right;
    line-height: 20px;
    padding-left: 5px;

  }

  @keyframes youtubeAnim {

    0%,
    100% {
      color: #c9110f;
    }

    50% {
      color: #ff0000;
    }
  }

  /* footer  */
</style>